<template>
    <div class="my-points">
        <a-row :gutter="24" align="stretch">
            <a-col :span="8" style="display: flex; flex-direction: column; height: 100%">
                <a-card title="积分概览" :bordered="false" style="height: 100%">
                    <a-statistic title="当前积分" :value="currentPoints" :value-style="{ color: '#3f8600' }">
                        <template #suffix>
                            <span>分</span>
                        </template>
                    </a-statistic>
                    <a-divider />
                    <a-statistic title="本月获得" :value="monthlyEarned" :value-style="{ color: '#1890ff' }">
                        <template #suffix>
                            <span>分</span>
                        </template>
                    </a-statistic>
                </a-card>
            </a-col>

            <a-col :span="16" style="display: flex; flex-direction: column; height: 100%">
                <a-card title="积分记录" :bordered="false" style="height: 100%">
                    <a-table :columns="columns" :data-source="pointRecords" :loading="loading"
                        :pagination="{ pageSize: 2 }">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'type'">
                                <a-tag :color="record.type === 'earn' ? 'green' : 'red'">
                                    {{ record.type === 'earn' ? '获得' : '消费' }}
                                </a-tag>
                            </template>
                            <template v-else-if="column.key === 'points'">
                                <span :style="{ color: record.type === 'earn' ? '#3f8600' : '#cf1322' }">
                                    {{ record.type === 'earn' ? '+' : '-' }}{{ record.points }}
                                </span>
                            </template>
                        </template>
                    </a-table>
                </a-card>
            </a-col>
        </a-row>

        <a-row :gutter="24" style="margin-top: 24px">
            <a-col :span="24">
                <a-card title="积分兑换" :bordered="false">
                    <a-row :gutter="16">
                        <a-col :span="6" v-for="item in exchangeItems" :key="item.id">
                            <a-card hoverable>
                                <template #cover>
                                    <img :alt="item.name" :src="item.image" />
                                </template>
                                <a-card-meta :title="item.name">
                                    <template #description>
                                        <div>
                                            <p>{{ item.description }}</p>
                                            <p>所需积分: {{ item.points }}</p>
                                        </div>
                                    </template>
                                </a-card-meta>
                                <template #actions>
                                    <a-button type="primary" :disabled="currentPoints < item.points"
                                        @click="exchangeItem(item)">
                                        立即兑换
                                    </a-button>
                                </template>
                            </a-card>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import { getUserPointsRecord } from '@/api/taskActionController'

const loading = ref(false)
const currentPoints = ref(0)
const monthlyEarned = ref(0)

const columns = [
    {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
    },
    {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
    },
    {
        title: '积分',
        dataIndex: 'points',
        key: 'points',
    },
    {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
    },
]

const pointRecords = ref([])

const exchangeItems = ref([
    {
        id: 1,
        name: '课程优惠券',
        description: '满100减20元',
        points: 100,
        image: '/api/exchange/1/image',
    },
    {
        id: 2,
        name: 'VIP会员',
        description: '7天VIP体验',
        points: 500,
        image: '/api/exchange/2/image',
    },
    {
        id: 3,
        name: '学习资料包',
        description: '精选学习资料',
        points: 200,
        image: '/api/exchange/3/image',
    },
    {
        id: 4,
        name: '一对一辅导',
        description: '30分钟在线辅导',
        points: 800,
        image: '/api/exchange/4/image',
    },
])

const exchangeItem = (item) => {
    console.log('兑换商品:', item)
}

const fetchPoints = async () => {
    loading.value = true
    try {
        const res = await getUserPointsRecord()
        if (res.data && res.data.code === 0 && res.data.data) {
            const data = res.data.data
            currentPoints.value = data.totalPoints || 0
            monthlyEarned.value = data.monthPoints || 0
            pointRecords.value = (data.records || []).map((item) => ({
                id: item.id,
                time: item.completeTime ? dayjs(item.completeTime).format('YYYY-MM-DD HH:mm:ss') : '',
                type: item.pointsEarned > 0 ? 'earn' : 'consume', // 根据pointsEarned判断类型
                points: Math.abs(item.pointsEarned || 0), // 取绝对值显示
                description: item.reviewComment || item.taskName || (item.pointsEarned > 0 ? '任务获得积分' : '积分消费'),
            }))
        }
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    fetchPoints()
})
</script>

<style scoped>
.my-points {
    padding: 24px;
    min-height: 420px;
}
</style>